<template>
  <div class="my_backstage_system m-fullbox">
    <!-- 待办列表 -->
    <div class="home_backlog">
      <div class="backlog">
        <h1 class="title">待办事项</h1>
        <div class="backlog_num">
          <!-- xx证 -->
          <div style="background-color: #fbaaff">
            <i
              class="el-icon-s-order"
              style="font-size: 30px; opacity: 0.3"
            ></i>
            <div class="num">
              <span>xx证</span>
              <h1>16人</h1>
            </div>
          </div>
          <!-- xx证 -->
          <div style="background-color: #aacbff">
            <i
              class="el-icon-s-claim"
              style="font-size: 30px; opacity: 0.3"
            ></i>
            <div class="num">
              <span>xx证</span>
              <h1>16人</h1>
            </div>
          </div>
          <!-- xx证 -->
          <div style="background-color: #fdc696">
            <i
              class="el-icon-s-marketing"
              style="font-size: 30px; opacity: 0.3"
            ></i>
            <div class="num">
              <span>xx证</span>
              <h1>16人</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="PendingApproval">
        <div class="PendingApproval_title">
          <h1 class="title">待办审批</h1>
          <div class="title_echarts">
            <span>近七天审批趋势</span>
          </div>
        </div>
        <div class="PendingApproval_main">
          <div class="PendingApproval_num">
            <!-- 请假 -->
            <div style="background-color: #fbf1ff">
              <i
                class="el-icon-s-custom"
                style="font-size: 50px; opacity: 0.2"
              ></i>
              <div class="num">
                <span>{{ cardName[0] }}</span>
                <h1 style="color: #fbaaff">16人</h1>
              </div>
            </div>
            <!-- 补卡 -->
            <div style="background-color: #f1f3ff">
              <i
                class="el-icon-s-cooperation"
                style="font-size: 50px; opacity: 0.2"
              ></i>
              <div class="num">
                <span>{{ cardName[1] }}</span>
                <h1 style="color: #aacbff">16人</h1>
              </div>
            </div>
            <!-- 加班 -->
            <div style="background-color: #fff6f1">
              <i
                class="el-icon-s-platform"
                style="font-size: 50px; opacity: 0.2"
              ></i>
              <div class="num">
                <span>{{ cardName[2] }}</span>
                <h1 style="color: #fdc696">16人</h1>
              </div>
            </div>
          </div>
          <div class="PendingApproval_echarts">
            <div class="echarts" id="lineDemo" ref="chart"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 常用功能 -->
    <div class="home_commonlyFunction">
      <div class="commonlyFunction_title">
        <h1 class="title">常用功能</h1>
      </div>
      <div class="commonlyFunction_icon">
        <el-col
          class="icon_span"
          :span="8"
          v-for="item in this.commonlyFunction_icon"
          :key="item.span"
        >
          <i :class="item.icon"></i> <span v-if="item.span">{{ item.span }}</span>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //表格设置
      option: {
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            let aa = `${this.date}`;
            for (const x in params) {
              let bb = "</br>" + this.cardName[x] + ":" + params[x].value;
              aa += bb;
            }
            return aa;
          },
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
          max: "250",
        },
        series: [
          {
            data: [120, 200, 150, 145, 174, 198, 134],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#fbaaff",
            },
          },
          {
            data: [23, 43, 86, 23, 43, 99, 101],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#aacbff",
            },
          },
          {
            data: [145, 43, 120, 145, 134, 150, 86],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#fdc696",
            },
          },
        ],
      },
      cardName: ["请假", "补卡", "加班"],
      date: "",
      commonlyFunction_icon: [
        { icon: "el-icon-coin", span: "加盟收费" },
        { icon: "el-icon-message", span: "我的消息" },
        { icon: "el-icon-time", span: "定时提醒" },
        { icon: "el-icon-document-copy", span: "调薪报表" },
        { icon: "el-icon-plus", span: "" },
      ],
    };
  },

  created() {
    this.getDay();
  },
  mounted() {
    let chartDom = document.getElementById("lineDemo");
    let myChart = this.$echarts.init(chartDom);
    myChart.clear();
    myChart.setOption(this.option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  },
  methods: {
    getDay() {
      let sevenDay = [];
      const day = new Date().getDate();
      const month = new Date().getMonth() + 1;
      const year = new Date().getFullYear();
      for (let i = 6; i >= 0; i--) {
        let num = `${month}/${day - i}`;
        sevenDay.push(num);
        this.option.xAxis.data = sevenDay;
      }
      this.date = `${year}/${month}/${day}`;
    },
  },
};
</script>
<style lang="scss">
.my_backstage_system {
  display: flex;

  .home_backlog {
    width: 70%;
    margin: 20px;
    display: flex;
    flex-direction: column;

    .backlog {
      width: 100%;
      height: 28%;
      max-height: 200px;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 2px;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 15px;
      }

      .backlog_num {
        flex: 1;
        height: 100%;
        margin-top: 5px;
        display: flex;

        div {
          flex: 1;
          margin: 10px;
          display: flex;
          justify-content: center;
          border-radius: 5px;

          i {
            margin: 35px 5px 0px 20px;
          }

          .num {
            display: flex;
            flex-direction: column;

            span {
              font-size: 15px;
              color: #ffffff;
              opacity: 0.6;
              margin-top: -10px;
            }

            h1 {
              font-size: 20px;
              margin-top: 10px;
              color: #ffffff;
              opacity: 0.9;
            }
          }
        }
      }
    }

    .PendingApproval {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 20px;
      margin-top: 20px;
      width: 100%;
      background-color: #ffffff;
      border-radius: 2px;

      .PendingApproval_title {
        height: 10%;
        width: 100%;
        display: flex;
        justify-content: space-between;

        .title {
          font-size: 15px;
        }

        .title_echarts {
          font-size: 15px;
          opacity: 0.7;
        }
      }

      .PendingApproval_main {
        flex: 1;
        display: flex;

        .PendingApproval_num {
          margin-top: -5px;
          display: flex;
          width: 25%;
          height: 100%;
          flex-direction: column;
          justify-content: space-around;

          div {
            max-height: 140px;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            flex: 1;
            margin-top: 15px;
            padding-right: 10px;
            border-radius: 5px;

            .num {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              margin: 20px;

              span {
                font-size: 14px;
                opacity: 0.6;
              }

              h1 {
                margin-top: 10px;
                font-size: 20px;
                opacity: 0.9;
              }
            }
          }
        }

        .PendingApproval_echarts {
          flex: 1;
          display: flex;

          // align-content: center;
          .echarts {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .home_commonlyFunction {
    flex: 1;
    margin: 20px 20px 20px 0;
    padding: 20px;
    background-color: #ffffff;

    .commonlyFunction_title {
      .title {
        font-size: 15px;
      }
    }
    .commonlyFunction_icon {
      margin-top: 20px;
      .icon_span {
        height: 75px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        &:hover {
          background-color: #f3f8ff;
        }
        i {
          font-size: 30px;
          opacity: 0.7;
        }
        span {
          margin-top: 5px;
          font-size: 12px;
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
